<template>
  <div class="platform-manage">
    <je-panel v-bind="options">
      <template #left>
        <div class="left"
          ><SettingNav
            :nav-list="navList"
            :active-name="activeName"
            @change-nav-item="changeNavItem"
        /></div>
      </template>
      <template #default><component :is="activeName" :data-all="DataChange"></component> </template>
      <template #tbar>
        <Toolbar space="10">
          <Button type="primary" class="save toolbarEvent" @click="toolbarEvent"
            ><i class="fal fa-save">{{ $t('save') }}</i></Button
          >
          <!-- <Button class="save"
            ><i class="fal fa-arrow-from-bottom"
              ><span class="btnImport">{{ $t('export') }}</span></i
            ></Button
          >
          <Button class="save"
            ><i class="fal fa-arrow-from-top"
              ><span class="btnImport">{{ $t('import') }}</span></i
            ></Button
          > -->
          <TbFill />
          <Search
            v-model:value="value"
            label-field="value"
            sub-label-field="text"
            :placeholder="$t('search')"
            style="width: 240px"
            @search="onSearch"
            @select="onSelect"
          />
        </Toolbar>
      </template>
    </je-panel>
  </div>
</template>

<script>
  import SettingNav from '@/components/setting-nav.vue';
  import ManageBasic from '@/views/platform-manage/manage-basic/index.vue';
  import MailConfig from '@/views/platform-manage/mail-config/index.vue';
  import CompanyPlan from '@/views/platform-manage/company-plan/index.vue';
  // todo
  import OpenConfig from '@/views/platform-manage/open-config/index.vue';
  import NetdiscConfig from '@/views/platform-manage/netdisc-config/index.vue';
  import PasswordConfig from '@/views/platform-manage/password-config/index.vue';
  import { Panel, Button, Toolbar, Search, Input } from '@jecloud/ui';
  import { reactive, ref, onUnmounted, defineComponent } from 'vue';
  import VueEvent from '@/helper/model/event';
  import { pinyin } from '@jecloud/utils';
  import { getAllData } from '@/api';
  import { changeObj, mergeArray } from '@/utils/utils';
  import configData from '@/data/plaform-manage-data';
  import SearchData from '@/data/search-data-manage';
  import SearchCompanyData from '@/data/search-data-manage-company';
  import { useI18n } from '@common/locales';
  import { getSystemConfig, cloneDeep, getCurrentAccount } from '@jecloud/utils';
  export default defineComponent({
    name: 'PlatformManage',
    components: {
      SettingNav,
      JePanel: Panel,
      Button,
      Toolbar,
      Search,
      TbFill: Toolbar.Fill,
      InputGroup: Input.Group,
      ManageBasic,
      MailConfig,
      NetdiscConfig,
      OpenConfig,
      PasswordConfig,
      CompanyPlan,
    },
    setup() {
      // 是否开启Saas模式
      const JE_SAAS_ENABLE = getSystemConfig('JE_SAAS_ENABLE') || '0';
      let { tenantId } = getCurrentAccount();
      // 当前选中
      const activeName = ref('ManageBasic');
      const options = reactive({
        // nav样式
        left: {
          style: {
            width: '240px',
          },
        },
        // tabr样式
        tbar: {
          style: {
            backgroundColor: '#e2e2e2',
            height: '50px',
            padding: '0 17px',
          },
        },
      });
      // 导航栏的配置
      const I18n = useI18n().messages.zh_CN.platformManage;
      const navList = ref([
        {
          icon: 'jeicon jeicon-platform-safety',
          title: I18n.setting,
          color: '#00A642',
          option: 'ManageBasic',
          show: false,
        },
        {
          icon: 'jeicon jeicon-platform-password',
          title: I18n.password,
          color: '#E24C20',
          option: 'PasswordConfig',
          show: false,
        },
        // {
        //   icon: 'jeicon jeicon-platform-platform',
        //   title: I18n.open,
        //   color: '#008ECD',
        //   option: 'OpenConfig',
        //   show: false,
        // },
        // {
        //   icon: 'jeicon jeicon-platform-netdisc',
        //   title: I18n.network,
        //   color: '#F3752D',
        //   option: 'NetdiscConfig',
        //   show: true,
        // },
        {
          icon: 'jeicon jeicon-platform-mail',
          title: I18n.mail,
          color: '#00BCBC',
          option: 'MailConfig',
          show: false,
        },
      ]);
      // saas模式下 普通租户 有公司方案
      if (JE_SAAS_ENABLE == '1' && tenantId != 'system') {
        const menuDatas = cloneDeep(navList.value);
        menuDatas.shift();
        menuDatas.unshift({
          icon: 'jeicon jeicon-platform-safety',
          title: I18n.companyPlan,
          color: '#00A642',
          option: 'CompanyPlan',
          show: false,
        });
        navList.value = menuDatas;
        activeName.value = 'CompanyPlan';
      }
      const changeNavItem = (parames) => {
        if (activeName.value === parames) return false;
        activeName.value = parames;
      };

      // 得到系统设置数据
      let DataChange = reactive(configData);
      getAllData({ attribute: 'platform-manage' }).then((data) => {
        DataChange = JSON.parse(JSON.stringify(data.childSettings));
        DataChange = changeObj(DataChange);
        DataChange = mergeArray(configData, DataChange);
        VueEvent.emit('sendData', DataChange);
      });
      // 保存事件分发
      const toolbarEvent = () => {
        // 保存事件分发
        VueEvent.emit('toolbarSaveEventS');
        const node = document.querySelector('.toolbarEvent');
        setTimeout(() => {
          node.blur();
        }, 500);
      };
      // 订阅保存数据后的回调
      const changeAllData = (res) => {
        const { item, formState } = { ...res };
        const result = DataChange.filter((td) => {
          return td.code === item;
        });
        result[0]?.items.find((td) => {
          Object.keys(formState).find((i) => {
            if (td.code === i) {
              td.value = formState[i] || '';
            }
          });
        });
      };
      // 搜索功能
      const value = ref('');
      const onSelect = (val, option) => {
        value.value = val;
        // 搜索的事件分发，传相应的item
        VueEvent.emit('trigger', option);
      };
      // 节点过滤函数
      const filter = (item, keyword) => {
        const _word = item.word?.toLocaleLowerCase() ?? '';
        const pinyinText = pinyin(_word, 'pinyin');
        if (_word.includes(keyword) || pinyinText.includes(keyword)) {
          return true;
        }
        return false;
      };
      // 查询关键字
      const onSearch = (keyword, resolve) => {
        let items = [];
        keyword = keyword.toLocaleLowerCase();
        let dstas = SearchData;
        if (JE_SAAS_ENABLE == '1' && tenantId != 'system') {
          dstas = SearchCompanyData;
        }
        dstas.forEach((item) => {
          if (filter(item, keyword)) {
            items.push({
              value: item.word,
              text: item.text,
              key: item.code,
              name: item.name,
              parentName: item.parentName,
            });
          }
        });
        resolve(items);
      };

      VueEvent.on('changeAllData', changeAllData);
      onUnmounted(() => {
        VueEvent.off('changeAllData', changeAllData);
      });

      return {
        options,
        navList,
        activeName,
        changeNavItem,
        DataChange,
        toolbarEvent,
        onSelect,
        onSearch,
        value,
      };
    },
  });
</script>

<style lang="less" scoped>
  .platform-manage {
    background: #f0f2f5 !important;
    width: 100%;
    height: 100%;
    overflow-x: auto !important;
    color: #333333;
    :deep(.fa-flower) {
      margin-top: 2px;
      color: rgb(235, 235, 235);
    }
    .je-panel {
      width: 1250px;
      margin: 20px auto;
    }
    .left {
      width: 230px;
    }
    .fal {
      font-weight: 500;
    }
    .save {
      display: flex;
      align-items: center;
      width: 80px;
      height: 32px;
      text-align: center;
      &:hover {
        cursor: pointer;
      }
    }
    :deep(hr) {
      width: 1010px;
      opacity: 0.1;
    }
    :deep(.myInput) {
      width: 700px;
    }
    :deep(.myInputNumber) {
      width: 665px;
    }
    :deep(.text) {
      margin-top: 6px;
      font-size: 13px;
      color: #a9aba9;
    }
    :deep(.ant-form-item) {
      padding-top: 4px;
    }
    :deep(.je-panel-item-region-default) {
      width: 100%;
      height: 100%;
      &::-webkit-scrollbar {
        display: none;
      }
    }
    :deep(.back-btn) {
      padding-left: 20px;
    }

    // :deep(.my-checkbox) {
    //   margin-top: 5px;
    // }
    :deep(.fade-animation) {
      animation: fade 1.5s;
    }
    @keyframes fade {
      0% {
        background: rgba(228, 241, 255, 0.1);
      }
      50% {
        background: rgba(228, 241, 255, 1);
      }
      100% {
        background: rgba(228, 241, 255, 0.1);
      }
    }
  }
</style>
